<%--
  Created by IntelliJ IDEA.
  User: 惠普
  Date: 2020/5/7
  Time: 15:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>角色管理</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
    <div id="roots">
        <card>
            <shiro:hasPermission name="user:add">
            <i-button type="primary" @click="add()">添加</i-button>
            </shiro:hasPermission>
            <shiro:hasPermission name="user:grant">
            <i-button type="error" @click="grant()">授权</i-button>
            </shiro:hasPermission>
        </card>
        <i-table :columns="columns" :data="data" border stripe height="500" @on-selection-change="tableSelect=arguments[0]">
            <template slot-scope="{row,index}" slot="action">
                <shiro:hasPermission name="user:update">
                <i-Button type="success" size="large" @click="update(row,index)">修改</i-Button>
                </shiro:hasPermission>
                <shiro:hasPermission name="user:del">
                <i-Button type="error" size="large" @click="del(row,index)">删除</i-Button>
                </shiro:hasPermission>
            </template>
        </i-table>
        <Modal  v-model="modaladd"  title="添加用户" @on-ok="doadd">
            <i-form :label-width="80">
                <Form-Item label="用户名称">
                    <i-input v-model="user.name"></i-input>
                </Form-Item>
                <Form-Item label="用户密码">
                    <i-input v-model="user.mima"></i-input>
                </Form-Item>
                <Form-Item label="用户账号">
                    <i-input v-model="user.zhanghao"></i-input>
                </Form-Item>
                <Form-Item label="用户金额">
                    <i-input v-model="user.money"></i-input>
                </Form-Item>
            </i-form>
        </Modal>
        <Modal v-model="modalupdate" title="修改用户" @on-ok="doupdate">
            <i-form :label-width="80">
                <Form-Item label="用户名称">
                    <i-input v-model="user.name"></i-input>
                </Form-Item>
                <Form-Item label="用户密码">
                    <i-input v-model="user.mima"></i-input>
                </Form-Item>
                <Form-Item label="用户账号">
                    <i-input v-model="user.zhanghao"></i-input>
                </Form-Item>
                <Form-Item label="用户生日">
                    <%--<i-input v-model="user.birthday"></i-input>--%>
                    <Date-Picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="user.birthday"></Date-Picker>
                </Form-Item>
                <Form-Item label="用户金额">
                    <i-input v-model="user.money"></i-input>
                </Form-Item>
            </i-form>
        </Modal>
        <Modal  v-model="modalgrant"  title="授权" @on-ok="dogrant">
            <Tree ref="tree" :data="treedata" show-checkbox multiple></Tree>
        </Modal>
    </div>
</body>
<script>
    new Vue({
        el:"#roots",
        data:{
            columns:[
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {title:"用户名称",key:"name"},
                {title:"用户密码",key:"mima"},
                {title:"用户账号",key:"zhanghao"},
                {title:"用户生日",key:"birthday"},
                {title:"用户金额",key:"money"},
                {title:"操作",slot:"action"}
            ],
            data:[],
            modaladd:false,
            modalupdate:false,
            user:{},
            treedata:[],
            modalgrant:false,
            tableSelect:[]
        },
        mounted(){
           this.getuserlist();
        },
        methods:{
            getuserlist(){
                axios.get("/list")
                    .then(({data})=>{
                        this.data=data.result;
                    })
            },
            add(){
                this.user={};
                this.modaladd=true;
            },
            doadd(){
                axios.post("/add",this.user)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                       this.getuserlist();
                    })
            },
            del(row,index){
                let _this = this;
                iview.Modal.confirm({
                    title:"确定是否要删除?",
                    content:"操作不可逆，删不删？",
                    onOk(){
                        axios.get("/del?id="+row.id)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg})
                                _this.getuserlist();
                            })
                    },
                    onCancel(){
                        alert("取消")
                    }
                })
            },
            update(row,index){
                this.user = row;
                this.modalupdate=true;
            },
            doupdate(){
                // axios.defaults.headers = {
                //     "Content-type": "application/x-www-form-urlencoded"
                // };
                //Qs.stringify(this.role)      stringify :对象role转为序列化字符串
                let params=Qs.stringify(this.user,{serializeDate:(date)=>{
                        return moment(date).format("YYYY-MM-DD HH:mm");
                    }});
                //Qs.parse(params)  将字符串转为json类型
                axios.post("/update",Qs.parse(params))
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getuserlist();
                    })
            },
            grant(){
                if(this.tableSelect.length!=1){
                    iview.Modal.confirm({
                        title:"信息提示",
                        content:"只能选择一项，请重新选择授权对象"
                    })
                    return;
                }
                axios.get(`/grant?userId=${this.tableSelect[0].id}`)
                    .then(({data})=>{
                        this.treedata=data.result;
                        this.modalgrant=true;
                    })
            },
            dogrant(){
                let arr = this.$refs.tree.getCheckedAndIndeterminateNodes()
                    .map(node=>"nid="+node.id).join("&");
                let param ="userId="+this.tableSelect[0].id;
                let params= param+"&"+arr;
                axios.get(`dogrant?${params}`)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getuserlist();
                    })
            }
        }

    })

</script>
</html>
